<template>
  <a-card title="流程历史跟踪">
    <a-table
      size="middle"
      bordered
      row-key="id"
      :columns="columns"
      :data-source="dataSource"
    >
      <template slot="action" slot-scope="text, record">
        <a @click="showAppendForm(record)">查看</a>
      </template>
    </a-table>
    <a-modal
      title="节点附加表单"
      :width="800"
      :visible="desformApplyVisible"
      @cancel="desformApplyHandleCancel"
    >
      <template slot="footer">
        <a-button @click="desformApplyHandleCancel">关闭</a-button>
      </template>
      <k-form-build ref="kfb" :value="kfdJsonData" :disabled="true" />
    </a-modal>
  </a-card>
</template>

<script>
import { historicFlow } from '@/api/task'
import { getActKAppendFormData, getActKAppendFormDeployment } from '@/api/process'

export default {
  name: 'historyProcessCard',
  props: {
    taskData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      dataSource: [],
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '名称',
          align: 'center',
          dataIndex: 'name'
        },
        {
          title: '开始时间',
          align: 'center',
          dataIndex: 'startTime'
        },
        {
          title: '结束时间',
          align: 'center',
          dataIndex: 'endTime'
        },
        {
          title: '负责人',
          align: 'center',
          dataIndex: 'assignee'
        },
        {
          title: '处理结果',
          align: 'center',
          dataIndex: 'deleteReason'
        },
        {
          title: '处理意见',
          align: 'center',
          dataIndex: 'comment'
        },
        {
          title: '查看附加表单',
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      desformApplyVisible: false,
      kfdJsonData: ''
    }
  },
  mounted() {
    const that = this
    historicFlow({ id: this.taskData.processInstanceId }).then(function(res) {
      if (res.success) {
        that.dataSource = res.result
      } else {
        that.$message.error(res.message)
      }
    })
  },
  methods: {
    showAppendForm(item) {
      console.log(item)
      this.getKfdJson(item)
    },
    desformApplyHandleCancel() {
      this.desformApplyVisible = false
    },
    async getKfdJson(item) {
      try {
        const res = await getActKAppendFormDeployment({
          nodeId: item.key,
          processDefinitionId: item.procDefId
        })
        const res2 = await getActKAppendFormData({
          nodeId: item.key,
          processInstanceId: item.procInstId,
          processDefinitionId: item.procDefId,
          formId: '11111111111111'
        })
        if (res.success) {
          if (!res.result) {
            return this.$message.warning('该节点的未设计表单')
          }
          this.kfdJsonData = JSON.parse(res.result.formJson)
          this.desformApplyVisible = true
          if (res2.result) {
            this.$nextTick(() => {
              console.log('-------------------------------------------')
              this.$refs.kfb.setData(JSON.parse(res2.result.formData))
            })
          }
        } else {
          this.$message.warning(res.message)
        }
        console.log(res2)
        // if (res.success) {
        //   if (!res.result) {
        //     return this.$message.warning('该工单的未设计表单')
        //   }
        //   this.modelId = item.modelId
        //   this.formId = item.formId
        //   this.formDataId = item.formDataId
        //   this.kfdJsonData = JSON.parse(res.result.htmlJson)
        //   this.desformApplyVisible = true
        //   console.log(item)
        //   this.$nextTick(() => {
        //     this.$refs.kfb.setData(JSON.parse(item.formData))
        //   })
        // } else {
        //   this.$message.warning(res.message)
        // }
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>
